<template>
  <div
    v-show="showBuyModal"
    auto-reopen="true"
    class="fixed z-50 inset-0 overflow-y-auto"
    id="headlessui-dialog-137"
    role="dialog"
    aria-modal="true"
    aria-labelledby="headlessui-dialog-title-141"
  >
    <div
      class="flex items-center justify-center min-h-screen sm:pt-4 sm:px-4 sm:pb-20 text-center sm:block sm:p-0"
    >
      <div
        @click="closeModal"
        id="headlessui-dialog-overlay-139"
        aria-hidden="true"
        class="fixed inset-0 bg-black bg-opacity-75 transition-opacity"
      ></div>
      <span
        class="hidden sm:inline-block sm:align-middle sm:h-screen"
        aria-hidden="true"
        >​</span
      >
      <div
        class="inline-block align-middle bg-white sm:rounded-lg px-4 pt-5 pb-4 text-left overflow-hidden shadow-xl transform transition-all sm:my-8 sm:align-middle w-full sm:w-full sm:p-6 sm:max-w-lg"
      >
        <div class="block absolute top-0 right-0 pt-6 pr-4">
          <button
            @click="closeModal"
            type="button"
            class="bg-white rounded-md text-black-70 hover:text-black focus:outline-none"
            tabindex="0"
          >
            <span class="sr-only">Close</span
            ><svg
              xmlns="http://www.w3.org/2000/svg"
              fill="none"
              viewBox="0 0 24 24"
              stroke="currentColor"
              class="h-6 w-6"
            >
              <path
                stroke-linecap="round"
                stroke-linejoin="round"
                stroke-width="2"
                d="M6 18L18 6M6 6l12 12"
              ></path>
            </svg>
          </button>
        </div>
        <div>
          <div class="mt-3 text-center sm:mt-0 sm:mx-2">
            <h3
              id="headlessui-dialog-title-141"
              class="text-2xl leading-10 font-bold text-gray-900"
            >
              购买商品
            </h3>
            <div
              class="mt-5 max-h-[calc(100vh-110px)] sm:max-h-full overflow-auto sm:overflow-visible"
            >
              <div class="text-left text-sm" data-v-7dc2e376="">
                <div
                  class="flex items-center text-base mb-7"
                  data-v-7dc2e376=""
                >
                  <div
                    class="w-[100px] h-[100px] sm:w-[150px] sm:h-[150px] bg-no-repeat bg-contain bg-center"
                    :style="`background-image: url('${order.shop_info?.good_images}');`"
                  ></div>
                  <div class="ml-10 space-y-2.5 text-left">
                    <h5>{{ order.shop_info?.goods_name }}</h5>
                    <p class="text-black-50 text-sm"></p>
                    <!-- <p class="text-black-50 text-sm">
                      <span>规格</span><span>&nbsp;37.5</span>
                    </p> -->
                    <p class="text-black-50 text-sm">
                      <span>数量</span
                      ><span>&nbsp;{{ order.shop_info?.buy_num }}</span>
                    </p>
                    <div class="price">
                      <span>Ł {{ order.shop_info?.pirce }}</span>
                    </div>
                  </div>
                </div>
                <div class="flex space-x-2.5 mb-7" data-v-7dc2e376="">
                  <label class="mt-2.5 text-black-50" data-v-7dc2e376=""
                    >支付方式：</label
                  >
                  <div
                    id="headlessui-radiogroup-142"
                    role="radiogroup"
                    class="flex"
                    data-v-7dc2e376=""
                  >
                    <!---->
                    <div
                      class="text-sm flex flex-wrap flex-shrink-1 gap-y-2"
                      role="none"
                    >
                      <div
                        class="group cursor-pointer relative text-center focus:outline-none flex items-center border rounded h-10 leading-10 text-sm sm:flex-0 text-black-50 border-black-50 whitespace-nowrap px-[2px] ml-2 border-[#ff7c00] border-2 px-px text-[#ff7c00] hover:text-[#ff7c00]"
                        id="headlessui-radiogroup-option-143"
                        role="radio"
                        aria-checked="true"
                        tabindex="0"
                      >
                        <div
                          id="tooltip-light"
                          role="tooltip"
                          class="inline-block absolute invisible z-10 py-2 px-3 top-[-100%] left-[50%] -translate-x-1/2 text-xs font-medium text-white bg-black rounded-lg shadow-sm opacity-0 ease-in duration-100 group-hover:delay-500 tooltip group-hover:visible group-hover:opacity-100 text-xs"
                        >
                          <span>Ł {{ order.shop_info?.total_price }}</span>
                        </div>
                        <p class="px-3">Ł {{ order.shop_info?.total_price }}</p>
                      </div>
                      <!-- <div
                        class="group cursor-pointer relative text-center focus:outline-none flex items-center border rounded h-10 leading-10 text-sm sm:flex-0 text-black-50 border-black-50 whitespace-nowrap px-[2px] ml-2 hover:text-[#ff7c00]"
                        id="headlessui-radiogroup-option-144"
                        role="radio"
                        aria-checked="false"
                        tabindex="-1"
                      >
                        <div
                          id="tooltip-light"
                          role="tooltip"
                          class="inline-block absolute invisible z-10 py-2 px-3 top-[-100%] left-[50%] -translate-x-1/2 text-xs font-medium text-white bg-black rounded-lg shadow-sm opacity-0 ease-in duration-100 group-hover:delay-500 tooltip group-hover:visible group-hover:opacity-100 text-xs"
                        >
                          <span>AJ碎片 7.0</span>
                        </div>
                        <p class="px-3">AJ碎片 7.0</p>
                      </div> -->
                    </div>
                  </div>
                </div>
                <ul
                  class="text-black-50 list-inside list-disc mb-7"
                  data-v-7dc2e376=""
                >
                  <li data-v-7dc2e376="">
                    在运输过程中或运输后征收的所有费用和税金是客户的责任
                  </li>
                  <li data-v-7dc2e376="">为了交货，请提供您的联系方式</li>
                </ul>
                <label
                  class="text-black-70 flex items-center mb-2.5"
                  data-v-7dc2e376=""
                  ><input
                    v-model="isCheck"
                    type="checkbox"
                    class="h-4 w-4 border-black-85 rounded text-yellow focus:ring-yellow mr-2.5"
                    required=""
                    data-v-7dc2e376="" />
                  <div class="mt-[1px]" data-v-7dc2e376="">
                    <span data-v-7dc2e376="">我已阅读并同意</span
                    ><span data-v-7dc2e376="">《服务协议》</span
                    ><span data-v-7dc2e376="">和</span
                    ><span data-v-7dc2e376="">《隐私条款》</span>
                  </div>
                  <span class="mark" data-v-7dc2e376=""></span
                ></label>
                <p
                  class="text-variants-warning"
                  data-v-7dc2e376=""
                  v-show="!isCheck"
                >
                  请您阅读并同意该服务协议和隐私条款。
                </p>
                <button
                  @click="confirmBuy"
                  type="button"
                  class="rounded no-underline border flex items-center justify-center shadow text-black-85 border-transparent hover:bg-yellow-light active:shadow-yellow py-2 px-3 sm:px-4 text-xs sm:text-base bg-variants-primary w-full mt-7"
                  data-v-7dc2e376=""
                >
                  <div>结算</div>
                  <!---->
                </button>
              </div>
            </div>
          </div>
        </div>
        <!---->
      </div>
    </div>
  </div>
</template>
<script>
export default {
  props: ["showBuyModal", "order", "goods_id", "goods_num"],
  data() {
    return {
      isCheck: true,
    };
  },
  methods: {
    closeModal() {
      this.$emit("closeModal", false);
    },
    confirmBuy() {
      if (this.isCheck) {
        this.$api
          .createOrder({
            goods_id: this.goods_id,
            goods_num: this.goods_num,
          })
          .then((res) => {
            console.log(res);
          });
      }
    },
  },
};
</script>
<style lang="" scoped></style>
